import 'package:flutter/material.dart';
import 'package:treadmill/values/colors.dart';
import 'package:treadmill/widgets/dash_board.dart';
import 'package:treadmill/widgets/indicator.dart';

class RunPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(
      children: <Widget>[
        Stack(
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [runPageHeaderColor,Colors.grey[100]])
              ),
              width: double.infinity,
              height: 400,
              child: Center(child: DashBoard(unit: 'km/h',radius: 100,speed: 40,)),
            ),
          ],
        ),
        Expanded(
          child: Container(
            color: Colors.grey[100],
            child: Column(
              children: <Widget>[
                Padding(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Column(
                        children: <Widget>[
                          Indicator(
                            iconData: Icons.directions_walk,
                            value: 10,
                            unit: "km",
                            format: "",
                          ),
                          SizedBox(
                            height: 10,
                          ),
                          Indicator(
                            iconData: Icons.timer,
                            value: 10,
                            unit: "Min",
                            format: "",
                          ),
                        ],
                      ),
                      Column(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Indicator(
                            iconData: Icons.fastfood,
                            value: 10,
                            unit: "kcal",
                            format: "",
                          ),
                          SizedBox(
                            height: 10,
                          ),
                          Indicator(
                            iconData: Icons.rotate_left,
                            value: 10,
                            unit: "bpm",
                            format: "",
                          ),
                        ],
                      ),
                      Column(
                        children: <Widget>[
                          Indicator(
                            iconData: Icons.favorite,
                            value: 10,
                            unit: "rpm",
                            format: "",
                          ),
                          SizedBox(
                            height: 10,
                          ),
                          Indicator(
                            iconData: Icons.rounded_corner,
                            value: 10,
                            unit: "R",
                            format: "",
                          )
                        ],
                      ),
                    ],
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 50),
                  child: FlatButton(
                    shape: StadiumBorder(),
                    padding: const EdgeInsets.symmetric(horizontal: 100,vertical: 10),
                    onPressed: () {},
                    child: Text('连接设备',style: TextStyle(fontSize: 20,fontWeight: FontWeight.w800,letterSpacing:5 ),),
                    color:buttonColor,
                    textColor: Colors.white,
                  ),
                )
              ],
            ),
          ),
        )
      ],
    ));
  }
}
